<template>
  <div class="clazz-main">
    <el-card class="box-card my-card search-block">
      <div slot="header" class="clearfix">
        <span>搜索条件</span>
      </div>
      <el-row>
        <el-col :span="6">
          <el-input v-model="search.className" size="small" placeholder="班级名称"></el-input>
        </el-col>
        <el-col :span="6">
          <el-select size="small" v-model="search.type" placeholder="班级类型">
            <el-option label="前端" :value="0"></el-option>
            <el-option label="UI" :value="1"></el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row style="margin-top:20px;">
        <el-col :span="4" :offset="20" style="text-align:right;">
          <el-button type="default" size="small" @click="resetSearch">重置</el-button>
          <el-button type="primary" size="small" @click="doSearch">查询</el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 内容区 -->
    <el-card class="my-card">
      <div slot="header">
        <el-button type="primary" @click="goAdd">新增</el-button>
      </div>
      <el-table v-loading="loading" :data="classList" border style="width: 100%">
        <el-table-column type="index" fixed width="50"></el-table-column>
        <el-table-column prop="className" fixed label="班级名称" width="180"></el-table-column>
        <!-- 自定义列！！！ 作用域插槽 -->
        <el-table-column label="班级类型" width="180">
          <template slot-scope="scope">
            <span
              :class="[{'span-ui':scope.row.type==1},{'span-h5':scope.row.type==0}]"
            >{{scope.row.type == 0?'前端':'UI'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="desc" label="班级描述" width="180"></el-table-column>
        <el-table-column prop="startTime" label="开班时间" width="180"></el-table-column>
        <el-table-column prop="endTime" label="结束时间" width="180"></el-table-column>
        <el-table-column prop="addTime" label="添加时间" width="180"></el-table-column>
        <!-- 表格操作 -->
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click.native.prevent="goEdit(scope.row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click.native.prevent="deleteRow(scope.row)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="margin: 30px auto; text-align: right;"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.start"
        :page-sizes="page.sizes"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      ></el-pagination>
    </el-card>
    <!-- 新增班级弹窗 -->
    <el-dialog
      title="编辑班级信息"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      :visible.sync="dialog"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :model="xyClassInfo" label-width="80px">
        <el-form-item label="班级名称">
          <el-input v-model="xyClassInfo.className"></el-input>
        </el-form-item>
        <el-form-item label="班级类型">
          <el-select v-model="xyClassInfo.type" placeholder="选择班级类型">
            <el-option label="前端" :value="0"></el-option>
            <el-option label="UI" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开班时间">
          <el-date-picker
            v-model="xyClassInfo.startTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker
            v-model="xyClassInfo.endTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="描述信息">
          <el-input v-model="xyClassInfo.desc" type="area" placeholder></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="doSave">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import _ from "lodash";
import {
  classList,
  saveClass,
  delClass,
  detail,
  updateClass
} from "@/api/xy/clazz";
import { resetData } from "@/utils/index";
export default {
  name: "Clazz",
  data() {
    return {
      loading: false, // 是否开启loading
      dialog: false, // 默认关闭
      title: "hello,clazz!",
      search: {},
      classList: [],
      xyClassInfo: {
        type: 0
      }, // 班级信息
      page: {
        start: 1, // 后台默认是1
        limit: 10, // 每页10条  limit和sizes必须是一致的  ele bug
        sizes: [10, 20, 30, 40],
        total: 0 // 总数量
      }
    };
  },
  created() {
    this.getClassList();
  },
  methods: {
    getClassList() {
      //开启loading
      this.loading = true;
      // 查询条件 拼装
      var params = {
        start: this.page.start,
        limit: this.page.limit,
        ...this.search
      };
      params = _.pickBy(params, item => item !== "");
      classList(params).then(res => {
        // 重置分页数据
        this.page.total = res.data.totalRow;
        this.classList = res.data.list;
        // 关闭loading
        this.loading = false;
      });
    },
    deleteRow(row) {
      //有确认对话框
      this.$confirm("删除该条目?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          delClass({
            id: row.id
          }).then(res => {
            if (res.code) {
              //弹出成功提示
              this.$message.success("删除成功！");
              // 刷新列表数据
              this.getClassList();
            } else {
              this.$message.error("删除失败！");
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    doSearch() {
      // 分页数据应该重置
      resetData(this, "page");
      this.getClassList();
    },
    handleSizeChange(val) {
      this.page.limit = val;
      this.getClassList();
    },
    handleCurrentChange(val) {
      //改变了当前页
      this.page.start = val;
      //刷新
      this.getClassList();
    },
    handleClose() {
      // 还原表单
      resetData(this, "xyClassInfo");
      this.dialog = false;
    },
    goAdd() {
      this.dialog = true;
    },
    doSave() {
      /* 同一个弹窗 新增没有id 后台获取的有id */
      var api = null;
      if (this.xyClassInfo.id) {
        api = updateClass;
      } else {
        api = saveClass;
      }

      api({
        xyClassInfo: {
          ...this.xyClassInfo
        }
      }).then(res => {
        if (res.code) {
          this.$message.success("保存成功！");
          this.handleClose();
          this.getClassList();
        } else {
          this.$message.error("保存失败！");
        }
        console.log(res);
      });
    },
    goEdit(row) {
      this.dialog = true;
      // 根据id查询明细
      detail({
        id: row.id
      }).then(res => {
        this.xyClassInfo = res.data;
      });
    },
    resetSearch() {
      this.search = {};
      this.getClassList();
    }
  }
};
</script>

<style lang="scss" socped>
.clazz-main {
  .title {
    color: green;
  }
  .my-card {
    margin: 30px 30px;
  }
  .search-block {
    //   样式穿透
    .el-input {
      width: 200px;
    }
  }
  .span-ui {
    color: red;
  }
  .span-h5 {
    color: green;
  }
}
</style>